<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>


	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>FancyForm Test</title>
	<style type="text/css" media="screen">@import url(style.css);</style>
<!--[if gte IE 5]>
<style type="text/css" media="screen">#formwrap{top:50%} #form1{top:-50%}</style>
<![endif]-->
	</head><body>
	<div id="wrapper">
		<div id="outer">
			<div id="formwrap">
				<div id="form1">
					<form action="index.php" method="post" class="centre">
<h2>FancyForm Script Demo</h2>
	<ul>
	<li class="tip" title="Left alone :: Elements you are not styling are left unchanged automatically.">
		<strong>Name:</strong>
		<label><input name="name" class="text" type="text"></label>
	</li>
	<li class="tip" title="Radio buttons :: Easily styled, and no interference between groups.">
		<strong>Height:</strong>
		<label class="f_radio unselected"><input style="position: absolute; left: -9999px;" name="height" value="dwarf" type="radio"> Dwarf</label>
		<label class="f_radio selected"><input style="position: absolute; left: -9999px;" name="height" value="average" checked="checked" type="radio"> Normal Human</label>
		<label class="f_radio unselected"><input style="position: absolute; left: -9999px;" name="height" value="giant" type="radio"> Off the scale</label>
	</li>
	<li class="tip" title="Another set of radio buttons. Notice that they do not interfere with the previous set.">
		<strong>Gender:</strong>
		<label style="outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;" class="f_radio unselected"><input style="position: absolute; left: -9999px;" name="gender" value="male" type="radio"> Masculine</label>
		<label style="outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;" class="f_radio unselected"><input style="position: absolute; left: -9999px;" name="gender" value="female" type="radio"> Feminine</label>
		<label style="outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;" class="f_radio unselected"><input style="position: absolute; left: -9999px;" name="gender" value="common" type="radio"> Common</label>
		<label style="outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;" class="f_radio selected"><input checked="checked" style="position: absolute; left: -9999px;" name="gender" value="neuter" type="radio"> Neuter</label>
	</li>
	<li class="tip" title="Checkbox :: Again, easily styled to behave like a normal checkbox, but prettily.">
		<strong>Other:</strong>
		<label class="f_checkbox unchecked"><input style="position: absolute; left: -9999px;" name="newsletter" type="checkbox"> Subscribe to our newsletter</label>
		<label class="f_checkbox checked"><input style="position: absolute; left: -9999px;" name="promo_mails" checked="checked" type="checkbox"> Receive promotional emails</label>
		<label class="f_checkbox unchecked"><input style="position: absolute; left: -9999px;" name="tos" type="checkbox"> I agree to the Terms of Service</label>
	</li>
	<li class="centre" style="margin-top: 4px;">
		<input value="Reset" type="reset"> <input name="submit" value="Submit Form" type="submit">
	</li>
</ul>
					</form>
				</div>
			</div>
		</div>
	</div>
<div id="footer">
	© 2008 <a href="http://lipidity.com/">Vacuous Virtuoso</a> | <a href="http://lipidity.com/fancy-form/">About</a> &nbsp;<a href="http://lipidity.com/antique.php"><!-- legumes --></a>
</div>
<script type="text/javascript" src="FancyForm%20Test_files/mootools.js"></script>
<script type="text/javascript" src="FancyForm%20Test_files/moocheck.js"></script>
	</body></html>